<template>
	<i-drawers v-model="showShop" @change="changes" bodyHeight="800rpx">
		<view class="shop_specs">
			<image src="../../static/images/close_gray_icon.png" @click="change"></image>
			<view class="shop_price">
				<i-price :size="28">{{discountPrice}}</i-price>
				<text class="not_price">￥{{price}}</text>
			</view>
			<view style="overflow-y: auto; height: 420rpx;">
				<view class="signal">
					<view class="signal_title">型号</view>
					<view class="tags">
						<i-tag @click="selectSku(i, v)" right="20rpx" bottom="20rpx" :key="v"
							v-for="(i, v) in goodData.skuVos" radius="32rpx"
							:bgColor="active === v ? 'rgba(251, 101, 46, 0.10)' : '#F3F4F5'"
							:color="active === v ? '#FB652E' : '#16161F'"
							:border="active === v ? '1rpx solid #FB652E': '1rpx solid #f3f4f5'" size="26rpx"
							padding="14rpx 40rpx">{{i.skuName}}</i-tag>
					</view>
				</view>
				<view class="signal">
					<view class="signal_title">规格</view>
					<view class="tags">
						<i-tag @click="selectShop(i, v)" right="20rpx" bottom="20rpx" :key="v"
							v-for="(i, v) in goodData.skuVos?.[active]?.skuBaseVoList" radius="32rpx"
							:bgColor="activeSku === v ? 'rgba(251, 101, 46, 0.10)' : '#F3F4F5'"
							:color="activeSku === v ? '#FB652E' : '#16161F'"
							:border="activeSku === v ? '1rpx solid #FB652E': '1rpx solid #f3f4f5'" size="26rpx"
							padding="14rpx 40rpx">{{i.volume}}L</i-tag>
					</view>
				</view>
			</view>
			<view class="" style="height: 60rpx"></view>
			<i-buttons color="#fff" bgColor="#FB652E" padding="18rpx 0" radius="4" size="32" @click="submit">确定
			</i-buttons>
		</view>
	</i-drawers>
</template>

<script lang="ts" setup>
	import useStore from '../../stores/index'
	import { ref, defineEmits, defineProps, watch } from 'vue';
	import { showTost } from '../../utils/common';
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		goodData: {
			type: Object,
			default: () => { }
		} as any
	})

	const showShop = ref(false)
	const active = ref(0)
	const activeSku = ref(0)
	const activeCode = ref('')
	const price = ref(0)
	const discountPrice = ref(0)
	const activeSkuName = ref('')
	const activeItem = ref<any>({})

	const store = useStore()
	const emit = defineEmits(['update:modelValue', 'change'])

	const change = () => {
		showShop.value = false
		changes(showShop.value)
	}
	const changes = (e : boolean) => {
		active.value = 0
		activeSkuName.value = '',
		activeSku.value = 0
		activeCode.value = ''
		price.value = 0
		discountPrice.value = 0
		activeItem.value = {}
		emit('change', e)
	}

	const selectSku = (i : { skuName : string }, v : number) => {
		active.value = v
		activeSkuName.value = i.skuName
		activeItem.value = props.goodData.skuVos[v]?.skuBaseVoList[0]
		price.value = props.goodData.skuVos[v]?.skuBaseVoList[0]?.priceAmt
		discountPrice.value = props.goodData.skuVos[v]?.skuBaseVoList[0]?.sellAmt
		activeCode.value = props.goodData.skuVos[v]?.skuBaseVoList[0]?.id
		activeSku.value = 0
	}

	const selectShop = (data : { id : string, priceAmt : number, sellAmt : number, discountAmount : number, skuName : string }, i : number) => {
		activeSku.value = i
		activeCode.value = data.id
		activeItem.value = data
		price.value = data.priceAmt
		discountPrice.value = data.sellAmt
		activeSkuName.value = data.skuName
	}

	const submit = () => {
		if (activeSku.value < 0) {
			showTost('请选择规格')
			return
		}
		store.addShopForm({
			serviceId: activeCode.value,
			price: price.value,
			discountPrice: discountPrice.value,
			serviceName: props.goodData.oilName,
			volume: activeItem.value.volume,
			oilId: props.goodData.id,
			skuName: activeSkuName.value,
			businessType: '10003007'
		})
		change()
	}

	watch(() => props.show, (val) => {
		if (val) {
			activeSkuName.value = props.goodData.skuVos[0]?.skuBaseVoList[0].skuName
			activeItem.value = props.goodData.skuVos[0]?.skuBaseVoList[0]
			price.value = props.goodData.skuVos[0]?.skuBaseVoList[0]?.priceAmt
			discountPrice.value = props.goodData.skuVos[0]?.skuBaseVoList[0]?.sellAmt
			activeCode.value = props.goodData.skuVos[0]?.skuBaseVoList[0]?.id
			showShop.value = true
		}
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	.shop_specs {
		width: calc(100% - 64rpx);
		margin: 0 auto;
		background-color: #fff;
		position: relative;

		image {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			right: 10rpx;
			top: 0rpx;
		}

		.shop_price {
			@include flexCC;
			margin-bottom: 36rpx;

			.not_price {
				@include dprice(26rpx);
				color: #A0A0AD;
				margin-top: 8rpx;
				margin-left: 8rpx;
				text-decoration: line-through;
			}
		}

		.signal {
			margin-bottom: 32rpx;

			.signal_title {
				@include titlefont(26rpx);
				margin-bottom: 32rpx;
				@include dWeight;
			}
		}

	}
</style>